<template>
  <div class="questionBody">
    <div style="text-align: left !important" class="questionHead">
      <el-button type="primary" @click="dialogFormVisible = true">添加分类</el-button>
    </div>
    <div class="questinTable">
      <el-table :data="ClassifyList" border style="width: 100%">
        <el-table-column type="index" label="序列" align="center" width="80" />
        <el-table-column label="题目" align="center">
          <template #default="scoped">
            <span v-if="scoped.row.emitFlag"><el-input v-model="scoped.row.title"></el-input></span>
            <span v-else>{{ scoped.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="scoped">
            <el-switch v-model="scoped.row.status" @change="editStatus(scoped.row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scoped">
            <el-button v-if="scoped.row.emitFlag" type="success" @click="saveItem(scoped.row)">保存</el-button>
            <el-button v-else type="warning" @click="editItem(scoped.row)"> 修改 </el-button>
            <el-button type="danger" @click="delItem(scoped.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        v-model:currentPage="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        small="false"
        background="false"
        layout="total, sizes, prev, pager, next, jumper"
        :total="currentPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog v-model="dialogFormVisible" title="添加分类">
      <el-form ref="ruleFormRef" :rules="rules" :model="ClassFrom">
        <el-form-item label="分类名称" prop="title" :label-width="formLabelWidth">
          <el-input v-model="ClassFrom.title" style="width: 400px" autocomplete="off" />
        </el-form-item>
        <el-form-item label="是否可用" prop="status" :label-width="formLabelWidth">
          <el-radio-group v-model="ClassFrom.status" class="ml-4">
            <el-radio label="1" size="large">是</el-radio>
            <el-radio label="0" size="large">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { Pass } from 'codemirror'
import Service from './api/index'

export default {
  setup() {
    const currentPage = ref(10)
    const pageSize = ref(5)
    const pageNum = ref(1)
    const query = ref('')
    const ruleFormRef = ref<FormInstance>()
    const dialogFormVisible = ref(false)
    const formLabelWidth = '180px'
    const props = {
      value: 'title'
    }
    const data = reactive({
      ClassifyList: [],
      ClassFrom: {}
    })

    const rules = reactive<FormRules>({
      title: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
      status: [
        {
          required: true,
          message: '状态不能为空',
          trigger: 'change'
        }
      ]
    })

    const questionList = async () => {
      const info = { pagesize: pageSize.value, pagenum: pageNum.value }
      const res = await Service.getClassify(info)
      data.ClassifyList = res.data
      currentPage.value = res.count
      pageNum.value = res.pagenum
    }

    const editItem = (val: object) => {
      data.ClassifyList.forEach((item) => {
        if (item.id === val.id) {
          item.emitFlag = true
        }
      })
    }
    const saveItem = async (val: object) => {
      data.ClassifyList.forEach((item) => {
        if (item.id === val.id) {
          item.emitFlag = false
          Service.editType(item)
        }
      })
    }

    const submitForm = (formEl) => {
      if (!formEl) return
      formEl.validate(async (valid, fields) => {
        if (valid) {
          await Service.addType(data.ClassFrom)
          data.ClassFrom = {}
          dialogFormVisible.value = false
          questionList()
        }
      })
    }
    // 修改状态
    const editStatus = (val: object) => {
      Service.editType(val)
    }

    const delItem = async (val: object) => {
      await Service.delQuestion(val.id)
      questionList()
    }

    // 切换每页显示多少条
    const handleSizeChange = (val: object) => {
      pageSize.value = val
      questionList()
    }
    // 切换第几页
    const handleCurrentChange = (val: object) => {
      pageNum.value = val
      questionList()
    }

    onMounted(questionList())

    return {
      pageNum,
      query,
      currentPage,
      pageSize,
      props,
      ...toRefs(data),
      delItem,
      editItem,
      saveItem,
      handleSizeChange,
      handleCurrentChange,
      dialogFormVisible,
      formLabelWidth,
      submitForm,
      rules,
      ruleFormRef,
      editStatus
    }
  }
}
</script>

<style lang="stylus" scoped>
.questionBody{
  width: 100%;
  padding-left: 2%;
  padding-right: 2%;
  box-sizing: border-box;
  .questinTable{
    margin-top: 2%;
  }
  .pagination{
  width: 100%;
  padding: 20px 0 0 25%;
  }
}

/deep/.el-dialog{
  margin:7% auto;
}
</style>
